<!--
 * @Description: 悟空软件
 * @Author: 悟空
 * @Date: 2020-06-04 10:53:06
 * @LastEditTime: 2023-09-06 14:18:01
 * @LastEditors: yang
-->
<template>
  <div id="employee-main-container" class="employee-index">
    <!-- 页面标题和搜索区域 -->
    <div class="page-header">
      <div class="page-title">
        <h2>计划招聘岗位</h2>
      </div>
      <div class="header-actions">
        <div class="left-actions">
          <el-input
            v-model="search"
            placeholder="请输入招聘岗位"
            clearable
            size="small"
            @keyup.enter.native="searchClick">
            <el-button slot="append" icon="el-icon-search" @click="searchClick" />
          </el-input>
        </div>
        <div class="right-actions">
          <el-button v-if="hasFilterContent" type="text" @click="resetFilter">清除筛选</el-button>
          <wk-popover-filter
            :width="popoverFilterWidth"
            :field-from.sync="filterObj"
            :field-list="filterList"
            :has-content="hasFilterContent"
            style="margin-right: 5px;"
            placement="bottom-end"
            @sure="refreshList"
            @reset="resetFilter"
          />
          <el-dropdown
            v-if="headerMoreHandle.length > 0"
            trigger="click"
            style="margin-left: 5px;"
            @command="headerMoreHandleClick">
            <el-button icon="el-icon-more"/>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) in headerMoreHandle"
                :key="index"
                :icon="item.type === 'export' && exportLoading ? 'el-icon-loading' : item.icon"
                :command="item.type"
                :disabled="item.type === 'export' && exportLoading">
                {{ item.type === 'export' && exportLoading ? '导出中...' : item.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-container">
      <el-table
        v-loading="loading || exportLoading"
        :data="list"
        :height="tableHeight"
        :cell-class-name="cellClassName"
        stripe
        border
        highlight-current-row
        @row-click="handleRowClick"
        @selection-change="handleSelectionChange">
        <el-table-column show-overflow-tooltip label="计划名称" align="center" prop="planName"/>
        <el-table-column show-overflow-tooltip label="招聘岗位" align="center" prop="positionName"/>
        <el-table-column show-overflow-tooltip label="岗位编码" align="center" prop="positionCode"/>
        <el-table-column show-overflow-tooltip label="招聘原因" align="center" prop="positionReason"/>
        <el-table-column show-overflow-tooltip label="招聘数量" align="center" prop="positionNum"/>
        <el-table-column show-overflow-tooltip label="招聘条件" align="center" prop="positionCondition"/>
        <el-table-column show-overflow-tooltip label="岗位类别" align="center" prop="positionType"
                         :formatter="fieldFormatter"/>
        <el-table-column show-overflow-tooltip label="招聘渠道" align="center" prop="positionChannel"
                         :formatter="fieldFormatter"/>
        <el-table-column show-overflow-tooltip label="招聘单位" align="center" prop="positionUnit"/>
        <el-table-column show-overflow-tooltip label="创建人" align="center" prop="createRealName"/>
        <el-table-column
          v-if="updateStatusAuth"
          label="操作"
          fixed="right"
          width="100">
          <template slot-scope="scope">
            <el-dropdown
              trigger="click"
              @command="handleTypeClick($event, scope.row)">
              <i class="el-icon-more table-more"/>
              <el-dropdown-menu slot="dropdown" style="width: 150px;">
                <el-dropdown-item
                  v-for="(item, index) in getRowDropdownItems(scope.row)"
                  :key="index"
                  :icon="item.icon"
                  :command="item.command">{{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>


      <div class="pagination-container">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>

    <!-- 新增/修改弹窗 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="1000px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="handleDialogClose">
      <el-form
        ref="positionForm"
        :model="positionForm"
        :rules="positionRules"
        label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="招聘计划" prop="planId">
              <el-select v-model="positionForm.planId" clearable placeholder="请选择招聘计划" style="width: 100%">
                <el-option
                  v-for="item in planList"
                  :key="item.planId"
                  :label="item.planName"
                  :value="item.planId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="招聘岗位" prop="positionName">
              <el-input v-model="positionForm.positionName" placeholder="请输入招聘岗位"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="招聘数量" prop="positionNum">
              <el-input-number v-model="positionForm.positionNum" :min="1" placeholder="请输入招聘数量"
                               style="width: 100%"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位类别" prop="positionType">
              <el-select v-model="positionForm.positionType" clearable placeholder="请选择岗位类别"
                         style="width: 100%">
                <el-option
                  v-for="item in positionTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="招聘渠道" prop="positionChannel">
              <el-select v-model="positionForm.positionChannel" clearable placeholder="请选择招聘渠道"
                         style="width: 100%">
                <el-option
                  v-for="item in positionChannelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="招聘单位" prop="positionUnit">
              <el-input v-model="positionForm.positionUnit" placeholder="请输入招聘单位"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="招聘原因" prop="positionReason">
              <el-input
                v-model="positionForm.positionReason"
                type="textarea"
                :rows="3"
                placeholder="请输入招聘原因"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="招聘条件" prop="positionCondition">
              <el-input
                v-model="positionForm.positionCondition"
                type="textarea"
                :rows="3"
                placeholder="请输入招聘条件"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
      </div>
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog
      title="计划招聘岗位详情"
      :visible.sync="detailDialogVisible"
      width="1000px"
      :close-on-click-modal="false">
      <div v-if="positionDetail" class="detail-content">
        <el-row :gutter="20" class="detail-row">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">计划名称：</span>
              <span class="value">{{ positionDetail.planName || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">招聘岗位：</span>
              <span class="value">{{ positionDetail.positionName || '--' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="detail-row">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">岗位编码：</span>
              <span class="value">{{ positionDetail.positionCode || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">招聘数量：</span>
              <span class="value">{{ positionDetail.positionNum || '--' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="detail-row">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">岗位类别：</span>
              <span class="value">{{ positionTypeValue[positionDetail.positionType] || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">招聘渠道：</span>
              <span class="value">{{ positionChannelValue[positionDetail.positionChannel] || '--' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="detail-row">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">招聘单位：</span>
              <span class="value">{{ positionDetail.positionUnit || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">创建人：</span>
              <span class="value">{{ positionDetail.createRealName || '--' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="detail-row">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">创建时间：</span>
              <span class="value">{{ positionDetail.createTime || '--' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="detail-row">
          <el-col :span="24">
            <div class="detail-item">
              <span class="label">招聘原因：</span>
              <span class="value">{{ positionDetail.positionReason || '--' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="detail-row">
          <el-col :span="24">
            <div class="detail-item">
              <span class="label">招聘条件：</span>
              <span class="value">{{ positionDetail.positionCondition || '--' }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 批量导入 -->
    <position-import
      :show="positionImportShow"
      @close="positionImportShow=false"
      @success="addSuccess"/>
  </div>
</template>

<script>

import {mapGetters} from 'vuex'
import {
  hrmRecruitPositionQueryListAPI,
  hrmRecruitPositionQueryByIdAPI,
  hrmRecruitPositionAddAPI,
  hrmRecruitPositionSetAPI,
  hrmRecruitPositionDeleteAPI,
  hrmRecruitPositionExportAPI
} from "@/api/hrm/recruit/position";
import {
  hrmRecruitPlanQueryListAPI
} from "@/api/hrm/recruit/plan";
import {downloadExcelWithResData, isEmpty} from "@/utils";
import {Message, MessageBox} from "element-ui";
import positionModel from '../model/plan'
import PositionImport from './components/PositionImport.vue'
import WkPopoverFilter from '@/components/NewCom/WkPopoverFilter'

export default {
  name: 'position',
  components: {
    PositionImport,
    WkPopoverFilter
  },

  provide() {
    return {
      'editAuth': this.editAuth
    }
  },
  data() {
    return {
      positionImportShow: false,
      loading: false, // 加载动画
      isCreate: false, // 是创建
      tableHeight: document.documentElement.clientHeight - 300, // 表的高度
      list: [],
      currentPage: 1,
      pageSize: 15,
      pageSizes: [15, 30, 60, 100],
      total: 0,
      search: '', // 搜索内容
      // 筛选宽
      popoverFilterWidth: document.documentElement.clientWidth - 80,
      /** 控制详情展示 */
      rowID: '', // 行信息
      showDview: false,
      // 高级筛选
      filterObj: {}, // 筛选确定数据
      filterList: [
        {
          name: '招聘渠道',
          field: 'positionChannel',
          formType: 'select',
          setting: positionModel.positionChannelOptions
        },
        {
          name: '岗位类别',
          field: 'positionType',
          formType: 'select',
          setting: positionModel.positionTypeOptions
        },
        {
          name: '岗位编码',
          field: 'positionCode',
          formType: 'text',
          setting: []
        },
        {
          name: '招聘原因',
          field: 'positionReason',
          formType: 'text',
          setting: []
        },
        {
          name: '招聘单位',
          field: 'positionUnit',
          formType: 'text',
          setting: []
        },
        {
          name: '招聘条件',
          field: 'positionCondition',
          formType: 'text',
          setting: []
        }
      ],
      selectionList: [], // 勾选数据 用于全局导出
      handleRowData: null, // 需要编辑的详情
      exportLoading: false, // 导出加载状态

      // 弹窗相关
      dialogVisible: false, // 新增/修改弹窗显示状态
      detailDialogVisible: false, // 详情弹窗显示状态
      dialogTitle: '新增计划招聘岗位', // 弹窗标题
      submitLoading: false, // 提交加载状态

      // 表单数据
      positionForm: {
        positionId: null,
        planId: null,
        positionName: '',
        positionCode: '',
        positionReason: '',
        positionNum: 1,
        positionCondition: '',
        positionType: null,
        positionChannel: null,
        positionUnit: ''
      },

      // 表单验证规则
      positionRules: {
        planId: [
          {required: true, message: '请选择招聘计划', trigger: 'change'}
        ],
        positionName: [
          {required: true, message: '请输入招聘岗位', trigger: 'blur'},
          {max: 200, message: '招聘岗位长度不能超过200个字符', trigger: 'blur'}
        ],
        positionReason: [
          {required: true, message: '请输入招聘原因', trigger: 'blur'},
          {max: 500, message: '招聘原因长度不能超过500个字符', trigger: 'blur'}
        ],
        positionNum: [
          {required: true, message: '请输入招聘数量', trigger: 'blur'}
        ],
        positionType: [
          {required: true, message: '请选择岗位类别', trigger: 'change'}
        ],
        positionChannel: [
          {required: true, message: '请选择招聘渠道', trigger: 'change'}
        ],
        positionCondition: [
          {max: 500, message: '招聘条件长度不能超过500个字符', trigger: 'blur'}
        ],
        positionUnit: [
          {max: 200, message: '招聘单位长度不能超过200个字符', trigger: 'blur'}
        ]
      },

      // 详情数据
      positionDetail: {
        planId: null,
        positionName: null,
        positionCode: null,
        positionNum: null,
        positionType: null,
        positionChannel: null,
        positionUnit: null,
        createRealName: null,
        createTime: null,
        positionReason: null,
        positionCondition: null
      },

      // 招聘计划列表
      planList: [],

      // 枚举值映射
      positionTypeValue: positionModel.positionTypeValue,
      positionChannelValue: positionModel.positionChannelValue,

      // 下拉选项
      positionTypeOptions: positionModel.positionTypeOptions,
      positionChannelOptions: positionModel.positionChannelOptions
    }
  },

  computed: {
    ...mapGetters([
      'hrm'
    ]),

    // 招聘权限
    recruitAuth() {
      return this.hrm.recruit
    },

    // 新建权限
    createAuth() {
      return this.recruitAuth && this.recruitAuth.savePost
    },

    // 编辑权限
    editAuth() {
      return this.recruitAuth && this.recruitAuth.updatePost
    },

    // 详情权限
    detailAuth() {
      return this.recruitAuth && this.recruitAuth.readPost
    },

    // 更新状态
    updateStatusAuth() {
      return this.recruitAuth && this.recruitAuth.updatePostStatus
    },

    // 操作
    tabelHandles() {
      const temps = []
      temps.push({
        label: '删除',
        command: 'delete',
        icon: 'wk wk-delete'
      })
      return temps
    },
    // 有筛选内容
    hasFilterContent() {
      if (this.filterObj) {
        let hasContent = false
        const keys = Object.keys(this.filterObj)
        for (let index = 0; index < keys.length; index++) {
          const key = keys[index]
          if (this.filterObj[key] != '' &&
            this.filterObj[key] != [] &&
            this.filterObj[key] != null &&
            this.filterObj[key] != undefined) {
            hasContent = true
          }
        }
        return hasContent
      }
      return false
    },

    // 头部更多操作
    headerMoreHandle() {
      const items = []

      // 新增按钮
      if (this.createAuth) {
        items.push({
          name: '新增',
          type: 'add',
          icon: 'el-icon-plus'
        })
      }

      // 导出按钮
      items.push({
        name: '导出',
        type: 'export',
        icon: 'el-icon-download'
      })

      // 导入按钮
      items.push({
        name: '导入',
        type: 'import',
        icon: 'el-icon-top'
      })

      return items
    }
  },
  watch: {},
  created() {
    window.onresize = () => {
      this.tableHeight = document.documentElement.clientHeight - 300
    }
    this.getPlanList()
    this.refreshList()
  },
  mounted() {
    // 路由配置事件
    this.initTask()
  },
  methods: {

    /**
     * 搜索
     */
    searchClick() {
      this.refreshList()
    },

    /**
     * 格式化字段
     */
    fieldFormatter(row, column) {
      if (column.property === 'positionType') {
        return this.positionTypeValue[row[column.property]] || '--'
      } else if (column.property === 'positionChannel') {
        return this.positionChannelValue[row[column.property]] || '--'
      } else {
        const value = row[column.property]
        return isEmpty(value) ? '--' : value
      }
    },

    /**
     * 导出数据
     */
    async exportData() {
      if (this.list.length === 0) {
        this.$message.warning('暂无数据可导出')
        return
      }

      // 设置导出加载状态
      this.exportLoading = true

      try {
        // 准备请求参数 - 与getList方法保持一致
        const params = {
          positionName: this.search
        }

        // 处理筛选条件
        for (var key in this.filterObj) {
          params[key] = this.filterObj[key]
        }

        // 调用后端导出接口
        await hrmRecruitPositionExportAPI(params).then(res => {
          downloadExcelWithResData(res)
          Message({
            message: '导出成功',
            type: 'success'
          })
        }).catch(error => {
          console.error('导出失败:', error)
          Message.error('导出失败，请重试')
          throw error
        })
      } catch (error) {
        console.error('导出失败:', error)
        this.$message.error('导出失败，请重试')
      } finally {
        // 确保无论成功还是失败都重置 loading 状态
        this.exportLoading = false
      }
    },


    /**
     * 详情操作
     */
    detailHandle(data) {
      if (data.type === 'delete') {
        this.showDview = false
      }
      this.getList()
    },

    /**
     * 刷新
     */
    refreshList() {
      this.handleCurrentChange(1)
    },

    /**
     * 高级筛选-清空
     */
    resetFilter() {
      this.filterObj = {}
      this.refreshList()
    },

    /**
     * 更改每页展示数量
     */
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },

    /**
     * 更改当前页数
     */
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },

    /**
     * 列表数据
     */
    getList() {
      // this.loading = true
      const params = {
        page: this.currentPage,
        limit: this.pageSize,
        positionName: this.search
      }

      for (var key in this.filterObj) {
        params[key] = this.filterObj[key]
      }

      hrmRecruitPositionQueryListAPI(params)
        .then(res => {
          this.list = res.data.list
          this.total = res.data.totalRow
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },

    /**
     * 通过回调控制class
     */
    cellClassName({row, column, rowIndex, columnIndex}) {
    },

    /**
     * 列表操作
     */
    handleCommand(command) {
      // if (command === 'delete') {
      // }
    },

    /**
     * 列表点击
     */
    handleRowClick(row, column, event) {
    },

    /**
     * 勾选操作
     */
    handleSelectionChange(val) {
      this.selectionList = val // 勾选的行
    },

    /**
     * 获取行操作
     */
    getRowDropdownItems(data) {
      const dropdownItems = []
      dropdownItems.push({
        label: '详情',
        command: 'view',
        icon: 'el-icon-view'
      })
      dropdownItems.push({
        label: '修改',
        command: 'edit',
        icon: 'wk wk-edit'
      })
      dropdownItems.push({
        label: '删除',
        command: 'delete',
        icon: 'wk wk-delete'
      })

      return dropdownItems
    },

    handleTypeClick(command, data) {
      if (command === 'view') {
        this.viewHandle(data)
      } else if (command === 'edit') {
        this.editHandle(data)
      } else if (command === 'delete') {
        this.deleteHandle(data)
      }
    },

    /**
     * 新增操作
     */
    addHandle() {
      this.dialogTitle = '新增计划招聘岗位'
      this.isCreate = true
      this.resetForm()
      this.dialogVisible = true
    },

    /**
     * 修改操作
     */
    editHandle(data) {
      this.dialogTitle = '修改计划招聘岗位'
      this.isCreate = false
      this.getPositionDetail(data.positionId, (detail) => {
        this.positionForm = {
          positionId: detail.positionId,
          planId: detail.planId,
          positionName: detail.positionName,
          positionReason: detail.positionReason || '',
          positionNum: detail.positionNum || 1,
          positionCondition: detail.positionCondition || '',
          positionType: detail.positionType,
          positionChannel: detail.positionChannel,
          positionUnit: detail.positionUnit || ''
        }
        this.dialogVisible = true
      })
    },

    /**
     * 详情操作
     */
    viewHandle(data) {
      this.getPositionDetail(data.positionId, (detail) => {
        this.positionDetail = detail
        this.detailDialogVisible = true
      })
    },

    /**
     * 删除操作
     */
    deleteHandle(data) {
      MessageBox.confirm(
        `确定要删除计划招聘岗位"${data.positionName}"吗？`,
        '删除确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.deletePosition(data.positionId)
      }).catch(() => {
        // 取消删除
      })
    },

    /**
     * 获取计划招聘岗位详情
     */
    getPositionDetail(positionId, callback) {
      this.loading = true
      hrmRecruitPositionQueryByIdAPI(positionId)
        .then(res => {
          this.loading = false
          if (callback) {
            callback(res.data)
          }
        })
        .catch(() => {
          this.loading = false
          Message.error('获取详情失败')
        })
    },

    /**
     * 删除计划招聘岗位
     */
    deletePosition(positionId) {
      this.loading = true
      const ids = [positionId];
      hrmRecruitPositionDeleteAPI(ids)
        .then(res => {
          this.loading = false
          Message.success('删除成功')
          this.getList()
        })
        .catch(() => {
          this.loading = false
          Message.error('删除失败')
        })
    },

    /**
     * 提交表单
     */
    handleSubmit() {
      this.$refs.positionForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          const api = this.isCreate ? hrmRecruitPositionAddAPI : hrmRecruitPositionSetAPI
          const data = {...this.positionForm}

          api(data)
            .then(res => {
              this.submitLoading = false
              Message.success(this.isCreate ? '新增成功' : '修改成功')
              this.dialogVisible = false
              this.getList()
            })
            .catch(() => {
              this.submitLoading = false
              Message.error(this.isCreate ? '新增失败' : '修改失败')
            })
        }
      })
    },

    /**
     * 重置表单
     */
    resetForm() {
      this.positionForm = {
        positionId: null,
        planId: null,
        positionName: '',
        positionCode: '',
        positionReason: '',
        positionNum: 1,
        positionCondition: '',
        positionType: null,
        positionChannel: null,
        positionUnit: ''
      }
      if (this.$refs.positionForm) {
        this.$refs.positionForm.clearValidate()
      }
    },

    /**
     * 弹窗关闭处理
     */
    handleDialogClose() {
      this.resetForm()
    },

    /**
     * 头部更多操作点击
     */
    headerMoreHandleClick(command) {
      if (command === 'add') {
        this.addHandle()
      } else if (command === 'export') {
        this.exportData()
      } else if (command === 'import') {
        this.positionImportShow = true
      }
    },

    /**
     * addSuccess
     */
    addSuccess() {
      this.handleCurrentChange(1)
    },

    /**
     * 获取招聘计划列表
     */
    getPlanList() {
      const params = {
        pageType: 0,
      }
      hrmRecruitPlanQueryListAPI(params).then(res => {
        this.planList = res.data.list || []
        this.planList.forEach(item => {
          item.planName = item.planName + '(' + item.planCode + ')'
        })
      }).catch(() => {
        this.planList = []
      })
    },

    /**
     * @description: 通过路由等路由携带的需要处理的事情
     * @return {*}
     */
    initTask() {
      const {query} = this.$route
      if (query.event === 'detail') {
        this.rowID = query.id
        this.showDview = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.employee-index {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;

  .page-header {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;

    .page-title {
      h2 {
        margin: 0;
        color: #333;
        font-size: 20px;
        font-weight: 600;
      }
    }

    .header-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;

      .left-actions {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .right-actions {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .date-picker {
        width: 300px;
      }

      .search-btn {
        height: 40px;
        padding: 0 20px;
      }

    }
  }

  .table-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .pagination-container {
      padding: 20px;
      text-align: right;
      background: #fafafa;
      border-top: 1px solid #ebeef5;
    }
  }
}

.table-more {
  cursor: pointer;
  font-size: 16px;
  color: #909399;

  &:hover {
    color: #409eff;
  }
}

// 详情弹窗样式
.detail-content {
  .detail-row {
    margin-bottom: 20px;
  }

  .detail-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;

    .label {
      font-weight: 600;
      color: #606266;
      min-width: 100px;
      flex-shrink: 0;
    }

    .value {
      color: #303133;
      flex: 1;
      word-break: break-all;
    }
  }
}

// 弹窗样式
.dialog-footer {
  text-align: right;
  padding-top: 20px;
}
</style>
